<template>
    <div class="app-container statiscs">
      <!-- <div class = echart id="baritem" style="margin: auto;width:800px;height:600px;padding-top:40px;" ></div>
      <div class = echart id="pieitem" style="margin: auto;width:800px;height:600px;padding-top:40px;display:none" ></div>
      <div class = echart id="lineoperate" style="margin: auto;width:800px;height:600px;padding-top:40px;display:none" ></div>
      <div class = echart id="barout" style="margin: auto;width:800px;height:600px;padding-top:40px;display:none" ></div>  -->
      <el-row :gutter="10">
        <el-col>
          <el-card style="margin:10px" shadow="hover">
            <div slot="header" >
                <i class="el-icon-s-data" style="display:inline;margin-right:5px"></i>
                <h3 class="statics.title-h3" style="display:inline;">库存分析<br/></h3>
            </div>
            <div class = echart id="baritem" style="margin:0px;width:100%;height:250px;padding-top:0px;" ></div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :xs="12" :sm="12" :md="12" :lg="12">
          <el-card style="margin:10px" shadow="hover">
            <div slot="header">
                <i class="el-icon-pie-chart" style="display:inline;margin-right:5px"></i>
                <h3 class="statics.title-h3" style="display:inline;">类型统计<br/></h3>
            </div>
            <div class = echart id="pieitem" style="margin:0px;width:auto;height:230px;padding-top:0px;" ></div>
          </el-card>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="12">
          <el-card style="margin:10px" shadow="hover">
            <div slot="header">
                <i class="el-icon-s-marketing" style="display:inline;margin-right:5px"></i>
                <h3 class="statics.title-h3" style="display:inline;">损耗分析<br/></h3>
            </div>
            <div class = echart id="lineoperate" style="margin:0px;width:100%;height:230px;padding-top:0px;" ></div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="10">          
        <el-col>
          <el-card style="margin:10px" shadow="hover">
          <div slot="header">
              <i class="el-icon-s-data" style="display:inline;margin-right:5px"></i>
              <h3 class="statics.title-h3" style="display:inline;">使用频率分析<br/></h3>
          </div>
            <div class = echart id="barout" style="margin:0px;width:auto;height:250px;padding-top:0px;" ></div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </template>

  <script>
  import { listItem} from "@/api/warehousemanager/item";
  import { listOperate} from "@/api/warehousemanager/operate";
  import { listOutwarehouse} from "@/api/warehousemanager/outwarehouse";
  import {barItem,pieItem,Arrayobj,obj,objName,lineOperate} from "@/api/warehousemanager/statiscs"
  import { barOut } from "../../../api/warehousemanager/statiscs";
  export default {
        name: "tab",
        data() {
          return {
          itemList : [],
          operateList:[],
          outwarehouseList:[],
          //bar参数
          xdata :null,
          ydata:null,
          tempitemList:[],
          //pie参数
          temptitle :[],
          title:[],
          num:[],
          result :null,
          //zhe参数
          templist:[],
          linexdata:[],
          linedata:[],
          lineydata:[],
          //out参数
          outtemplist:[],
          outxdata:[],
          outdata:[],
          outydata:[],
          // 参数
          itemqueryParams: {
              deptId:this.$store.getters.deptId,
          },
          queryParamstype: {
              typeId:null,
              typeName: null,
          },
          
          queryParamsline:{ 
              deptId:this.$store.getters.deptId,
          },
          // 查询参数
          outqueryParams: {
              itemId: null,
              itemNum: null,
              toWarehouseId:this.$store.getters.deptId,
          },

      }
  },
  created(){
      this.darwItem();
      this.darwItemType();
      this.darwOperate();
      this.darwOut();
  },
  methods: {
          /** 绘制库存统计图 */
          darwItem() {
              listItem(this.queryParams).then(response => {
                  this.itemList = response.rows;
                  console.log(this.itemList)
                  this.tempitemList = objName(this.itemList)
                  this.xdata = this.tempitemList.map(data => {
                      return data.itemName;
                  });
                  this.ydata = this.tempitemList.map(data => {
                      return data.itemNum;
                  });
                  barItem(this.xdata,this.ydata,'baritem');
              });
          },

          /** 绘制库存类型图 */
          darwItemType() {
            listItem(this.queryParams).then(response => {
                  this.itemList = response.rows;
                  this.temptitle = this.itemList.map(data => {
                      return data.itemType;
                  });
                  this.title = this.temptitle.map(data => {
                      return data.typeName;
                  });
                  this.num = this.itemList.map(data => {
                      return data.itemNum;
                  });
                  this.result = Arrayobj(this.num,this.title)
                  // console.log(this.result)
                  pieItem(this.result,'pieitem');
              });
          },

          /** 绘制外库图 */
          darwOperate() {
              listOperate(this.queryParamsline).then(response => {
                  this.operateList = response.rows;
                  this.templist = obj(this.operateList)
                  // console.log(this.templist)
                  this.lineydata = this.templist.map(data => {
                      return data.itemNum;
                  });
                  this.linedata = this.templist.map(data => {
                      return data.item;
                  });
                  this.linexdata = this.linedata.map(data => {
                      return data.itemName;
                  });
                  // console.log(this.zhexdata)
                  // console.log(this.zheydata)
                  lineOperate(this.linexdata,this.lineydata,'lineoperate');
              });
          },

          /** 绘制出库图 */
          darwOut() {
              listOutwarehouse(this.outqueryParams).then(response => {
                  this.outwarehouseList = response.rows;
                  this.outtemplist = obj(this.outwarehouseList)
                  // console.log(this.outtemplist)
                  this.outydata = this.outtemplist.map(data => {
                      return data.itemNum;
                  });
                  this.outdata = this.outtemplist.map(data => {
                      return data.item;
                  });
                  this.outxdata = this.outdata.map(data => {
                      return data.itemName;
                  });
                  barOut(this.outxdata,this.outydata,'barout');
              });
          },

        }
  }
  </script>

  <style scoped lang="scss">
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .statiscs {
    blockquote {
      padding: 10px 20px;
      margin: 0 0 20px;
      font-size: 17.5px;
      border-left: 5px solid #eee;
    }
    hr {
      margin-top: 20px;
      margin-bottom: 20px;
      border: 0;
      border-top: 1px solid #eee;
    }
    .col-item {
      margin-bottom: 20px;
    }

    ul {
      padding: 0;
      margin: 0;
    }

    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #676a6c;
    overflow-x: hidden;

    ul {
      list-style-type: none;
    }
    .update-log1 {
      margin-bottom: 20px;
      background-color: #4cb6e7;
    }

    .update-log2 {
      margin-bottom: 20px;
      background-color: rgb(159, 149, 149);
    }

    .update-log3 {
      margin-bottom: 20px;
      background-color: rgb(94, 175, 94);
    }

    .update-log4 {
      margin-bottom: 20px;
      background-color: rgb(211, 95, 186);
    }

    .title-h3{
      color:white;
      float: left;
      height: auto;
      margin-top: auto;
    }

    .size-icon{
      margin-top: 10px;
      font-size: 50px;
    }
  }
  </style>